<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box2 {
            margin-top: 10px;
        }

        .box3 {
            width: 110px;
            margin-top: 10px;
        }
    </style>
    <script src="../js/jquery.min.js"></script>
    <script>
        $(function () {
          
            // 添加
            // console.log( $(".warrper button"));
            $(".wrapper button").eq(0).click(function () {
                var value = $(".wrapper input").val()
                // console.log(value);
                if (value.length == 0) {
                    alert("请输入要添加的选项")
                    return
                }
                $(".wrapper .box3").append("<input type='checkbox'>" + value)
                $(".wrapper input").val("")
            })

            // 全选
            $(".wrapper button").eq(1).click(function () {
                // console.log(( $(".wrapper .box3 input")))

                $(".wrapper .box3 input").prop("checked", true)

            })


            // 全不选
            $(".wrapper button").eq(2).click(function () {

                $(".wrapper .box3 input").prop("checked", false)

            })


            // 反选
            $(".wrapper button").eq(3).click(function () {
                $(".wrapper .box3 input").each(function () {
                    console.log($(this));
                    if ($(this).prop("checked") == false) {
                        $(this).prop("checked", true)
                    } else if ($(this).prop("checked") == true) {
                        $(this).prop("checked", false)
                    }
                })
            })

            // 删除所选
            $(".wrapper button").eq(4).click(function () {
                  var arr = [];
                  console.log(arr);
                // var index=$(".wrapper .box3 input");
                $(".wrapper .box3 input").each(function (index, item) {
                                    
                    if ($(item).prop("checked") == true) {
                        $(item).parent("label").remove();
                    }
                    arr.push($(item).prop('checked')); 
                })
                if (arr.indexOf(true) == -1) {
                    alert("请选择要删除的选项")
                }
            })
        })
    </script>
</head>

<body>
    <div class="wrapper">
        <input type="text" placeholder="请输入需要添加选项">
        <button>添加</button>

        <div class="box2">
            <button>全选</button>
            <button>全不选</button>
            <button>反选</button>
            <button>删除所选</button>
        </div>

        <div class="box3">
            <label> <input type="checkbox">家里没宽带</label>
            <label> <input type="checkbox">网速不够快</label>
            <label> <input type="checkbox">手机没流量</label>
            <label> <input type="checkbox">学校妹wifi</label>
        </div>
    </div>

</body>

</html>